<template>
  <div class="hello">
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1"  @click="switchHome">
        <template slot="title">
          <i class="el-icon-s-home"></i>
          <span>首页</span>
        </template>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">网站管理</span>
        </template>
        <el-submenu :index="'2 - ' + index + 1" v-for="(item, index) in webarr" :key="index">
          <template slot="title">{{ item.name }}</template>
          <el-menu-item @click="switchWeb(item.name)" :index="'2 - ' + index + 1+'-'+ index + 1">
            数据库管理
          </el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" @click="switchManage">
          <i class="el-icon-s-custom"></i>
          <span slot="title">管理员</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-s-tools"></i>
        <span slot="title">设置</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      webarr: [],
    };
  },
  mounted() {
    this.$axios.get(`api/webName`).then((data)=>{
      console.log(data.data)
      this.webarr=data.data
    }).catch(function (error) {
      console.log(error);
    });
  },
  methods:{
    switchHome(){
      this.$router.push({path:"/home/index"})
    },
    switchWeb(name){
      this.$store.commit("setWebName",name)
      //延迟来传递信息，信息可以在页面未重置时接收但无法显示，所以延迟
      setTimeout(()=>{
        console.log("事件总线传递中----");
        this.$EventBus.$emit("distoryDataview",name)
      },200)
      this.$router.push({path:"/home/web/database"})
    },
    switchManage(){
      this.$router.push({path:"/home/manage"})
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
